<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>机台列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/weui.min.css" />
    <style type="text/css">
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
      }
      
      .search-matchine {
        display: flex;
        margin-top: 5px;
      }
      
      .mui-input-row {
        flex: 6;
      }
      
      .mui-input-row input {
        height: 26px;
        line-height: 24px;
        font-size: 13px;
        margin-bottom: 0;
        width: 90%;
        margin-left: 5%;
        padding: 0 3px;
      }
      
      .mui-input-row .mui-input-clear~.mui-icon-clear {
        top: 3px;
      }
      
      .search-btn-box {
        flex: 3;
      }
      
      .search-btn {
        border: 1px solid transparent;
        background-color: #ff6600;
        color: #fff;
        height: 28px;
        line-height: 26px;
        text-align: center;
        width: 80%;
        margin-left: 10%;
        border-radius: 2px;
        font-size: 14px;
      }
      /**/
      
      .machine-option {
        padding: 0 0 10px;
        margin: 10px;
        text-align: center;
        background-color: #fff;
      }
      .vux-1px{
      	border: 1px solid #ccc;
      	border-radius: 8px;
      	overflow: hidden;
      }
      .empty {
        text-align: center;
        margin-top: 50px;
        color: #999;
        font-size: 12px;
      }
      .bgGreen{
      	background-color: #8BC34A;
      	color: #fff;
      }
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
      
      
      
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <div class="machine" id="app">
      <div class="mask" v-show="isInit">加载中...</div>
      <div class="mui-scroll-wrapper">

        <div class="mui-scroll">
          <div class="search-matchine">
            <div class="mui-input-row">
              <input type="text" v-model='deviceStoreNumber' class="mui-input-clear" placeholder="请输入机台编号">
            </div>
            <div class="search-btn-box">
              <div class="search-btn" @click="search">
                查询
              </div>
            </div>
          </div>
          <p class="empty" v-if="list.length === 0">暂无礼品机</p>
          <div class="machine-row weui-flex" v-for="(item, index) in list" :key="index">
            <div class="weui-flex__item machine-option" v-for="(innerItem, innerIndex) in item" v-bind:class="{'vux-1px': typeof innerItem.deviceFullName !== 'undefined'}" :key="innerIndex" @click="toDetail(innerItem, index, innerIndex)">
              <div class="machine-option_content" v-if="typeof innerItem.deviceFullName !== 'undefined'">
              	<div class="bgGreen">
              		<div v-text="innerItem.deviceFullName"></div>
                	<div><span v-text="innerItem.storeNumber"></span> <span>号机</span>{{innerItem.masterNotes?'('+innerItem.masterNotes+')':''}}</div>
              	</div>
                <div style="background-color:#B8E881;color: #fff;">上架礼品</div>
                <div v-if="innerItem.goods.length === 0">无</div>
                <div class="weui-flex goods-item" v-for="(goods, goodsIndex) in innerItem.goods" :key="goodsIndex">
                  <div class="weui-flex__item" v-text="goods.wareGoods.name" style="flex: 1 0 70%;text-align: left;padding-left: 10px;"></div>
                  <div class="weui-flex__item" v-text="goods.deviceAmount " style="flex: 1 0 30%;text-align: center;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="mui-pull-bottom-pocket" v-show="isLoading">
            <div class="mui-pull">
              <div class="mui-pull-loading mui-icon mui-spinner" v-if="hasIcon"></div>
              <div class="mui-pull-caption" v-text="tip"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../config.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init();
      mui.plusReady(function() {
        var vm = new Vue({
          el: '#app',
          data: {
            isInit: true,
            rewards: [], 
            currentShopObj: {},
            pageNo: 1,
            pageTotal: 1,
            isLoading: false,
            hasIcon: true,
            tip: '加载中...',
            deviceStoreNumber:'',
            totalCount:'',
            pageCount: 10
          },
          created: function() {
            this.receiveParams();
            this.pageCount = 10
            this.loadData();
          },
          mounted: function() {
            this.fixScroll();
          },
          computed: {
            list: function() {
              var arr = [];
              for(var i = 0; i < this.rewards.length; i += 2) {
                var innerArr = [this.rewards[i]];
                if(this.rewards[i + 1]) {
                  innerArr.push(this.rewards[i + 1]);
                } else {
                  innerArr.push({});
                }
                arr.push(innerArr);
              }
              return arr;
            }
          },
          mounted: function() {
            var vm = this
            document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
              if(e.detail.y <= e.detail.maxScrollY && vm.pageTotal >= vm.pageNo) {
              	vm.pageCount  = 10
                vm.loadData();
              }
            });
            this.addListenter();
          },
          methods: {
            addListenter: function() {
              window.addEventListener('fresh', function(e) {
                vm.updateData(e.detail);
              });
            },
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.currentShopObj = self.currentShopObj;
              this.shopObjs = self.shopObjs;
            },
            fixScroll: function() {
              mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005,
                brounce: true,
                scrollY: true
              });
            },
            updateData: function(detail) {
              var pageNo = Math.floor(detail.index / 10) + 1;
              config.ajax({
                url: '/devices',
                data: {
                  pageNo: pageNo,
                  storeId: vm.currentShopObj.storeId
                },
                success: function(res) {
                  if(res.result === 1) {
                    //                  vm.rewards[detail.index] = res.rewards[detail.index - (pageNo - 1) * 10];
                    vm.$set(vm.rewards, [detail.index], res.rewards[detail.index - (pageNo - 1) * 10])
                    var detailPage = plus.webview.getWebviewById('machine-detail');
                    mui.fire(detailPage, 'fresh', {
                      reward: vm.rewards[detail.index]
                    });
                  }
                }
              });
            },
            search: function(){
            	this.pageNo = 1
            	mui('.mui-scroll-wrapper').scroll().reLayout();
            	this.pageCount = this.totalCount
            	this.loadData()
            },
            loadData: function() {
              if(this.isLoading) {
                return;
              }
              if(this.pageNo > 1) {
                this.isLoading = true;
              }
              config.ajax({
                url: '/devices',
                data: {
                  pageNo: this.pageNo,
                  storeId: this.currentShopObj.storeId,
                  deviceStoreNumber: this.deviceStoreNumber,
                  pageCount:this.pageCount
                },
                success: function(res) {
                  if(res.result === 1) {
                    vm.pageTotal = res.pageTotal
                    vm.totalCount = res.totalCount
                    if(vm.pageNo === 1) {
                      vm.rewards = res.rewards;
                      vm.isLoading = false;
                      setTimeout(function() {
                        mui('.mui-scroll-wrapper').scroll().reLayout();
                      }, 100)
                      vm.pageNo += 1;
                    } else {
                      if(res.rewards.length > 0) {
                        setTimeout(function() {
                          vm.rewards = vm.rewards.concat(res.rewards);
                          mui('.mui-scroll-wrapper').scroll().reLayout();
                          vm.isLoading = false;
                        }, 400);
                        vm.pageNo += 1;
                      } else {
                        setTimeout(function() {
                          vm.tip = '没有更多了';
                          vm.hasIcon = false;
                        }, 400);
                      }
                    }
                  } else {
                  	mui.toast(res.errormsg)
                  }
                  setTimeout(function() {
                    vm.isInit = false;
                  }, 400);
                }
              });
            },
            toDetail: function(reward, index, innerIndex) {
              if(typeof reward.deviceFullName !== 'unefined') {
                mui.openWindow({
                  url: 'machine-detail.html',
                  id: 'machine-detail',
                  styles: {
                    titleNView: {
                      titleText: vm.currentShopObj.storeName + '-上架货品',
                      titleColor: "#FFFFFF",
                      titleSize: "17px",
                      backgroundColor: "#FF6800",
                      autoBackButton: true,
                      buttons: [{
                        fontWeight: 'normal',
                        fontSize: '18px',
                        float: 'right',
                        fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                        text: "\ue602",
                        onclick: function() {
                          var allPage = plus.webview.all()
                          var nowPage = plus.webview.getWebviewById('index')
                          for(var i = 0; i < allPage.length; i++) {
                            if(allPage[i].getURL() !== nowPage.getURL()) {
                              plus.webview.close(allPage[i]);
                            }
                          }
                        }
                      }],
                      splitLine: {
                        color: "#CCCCCC",
                        height: "1px"
                      }
                    }
                  },
                  extras: {
                    currentShopObj: vm.currentShopObj,
                    reward: reward,
                    index: index * 2 + innerIndex
                  }
                });
              }
            }
          }
        });
      });
    </script>
  </body>

</html>